<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<base href="../demo/">
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="css/plain/details.css" />
		<style>
			/*横向时间轴*/
			.time-horizontal {
			    list-style-type: none;
			    border-top: 1px solid #707070;
			    max-width: 800px;
			    padding: 0px;
			    margin: 0px;
			}
			 
			.time-horizontal li {
			    float: left;
			    position: relative;
			    text-align: center;
			    width: 25%;
			    padding-top: 10px;
			}
			 
			.time-horizontal li b:before {
			    content: '';
			    position: absolute;
			    top: -10px;
			    left: 47%;
			    width: 12px;
			    height: 12px;
			    border: 2px solid #4c4c4c;
			    border-radius: 8px;
			    background: #4c4c4c;
			}
		</style>
		<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
		<script src="plugins/echarts.min.js"></script>
		<script type="text/javascript" src="plugins/layui/layui.js"></script>
		
	</head>
	<body >
    <div style="margin:0px; background-color: white; margin:0 10px;">
    	<div>
    		<img src="images/homePage.png"/>
    	</div>
        <fieldset class="layui-elem-field">
		  <legend>基本信息</legend>
		  <div class="layui-field-box">
		    <ul>
		    	<li>    
		    			<span th:text="'姓名:'+${name}"></span>     <span th:text="'部门:'+${department}"></span>   <span th:text="'人员编号:'+${code}"></span>
		    	</li>
		    	<li>    
		    			<span th:text="'性别:'+${gender}"></span>  <span th:text="'岗位:'+${station}"></span>  <span th:text="'技能级别:'+${skilllevel}"></span> 
		    	</li>
		    	<li>
		    	<br/><br/>
		    		<div><b>型号项目履历</b></div>
		    			<br/>
		    			<div class="container">
						    <ul id="product_record" class="time-horizontal">
						        <!-- <li><b>成立</b></li>
						        <li><b>合作</b></li>
						        <li><b>发展</b></li>
						        <li><b>共赢</b></li> -->
						    </ul>
						    
						</div>
						
		    			<!-- <img src="images/de.png"/>  -->
		    	</li>	
		    </ul>
		  </div>
		  <br/><br/><br/><br/><br/><br/>
		</fieldset>
			     
			<div class="seek layui-form layui-form-pane layui-elem-field">
				<div class="layui-form-pane" style="margin-top: 15px;">
				  <div class="layui-form-item">
				    <label class="layui-form-label">时间范围</label>
				    <div class="layui-input-inline">
				      <input class="layui-input" placeholder="开始日" id="begintime" onclick="layui.laydate({elem: this, festival: true})">
				    </div>
				    <div class="layui-input-inline">
				      <input class="layui-input" placeholder="截止日" id="endtime" onclick="layui.laydate({elem: this, festival: true})">
				    </div>
				  </div>
				</div>  
				<div class="layui-form-pane" style="margin-top: 15px;">
				  <div class="layui-form-item">
				    <label class="layui-form-label">产品范围</label>
				    <div class="layui-input-inline">
				      <select><option>XX-1结构分系统>天线</option></select>
				    </div>
				    
				  </div>
				</div> 
				<div class="layui-form-pane" style="margin-top: 15px;">
				  <div class="layui-form-item">
				    <button class="layui-btn">分析</button>
				  </div>
				</div> 
				<br/><br/>
			</div>
		  <fieldset class="layui-elem-field">
			  <legend>工作计划分析</legend>
			  <div class="layui-field-box">
					<div id="div1" style="width: 800px;height:300px;">
					</div>
					<div id="div2" style="width: 800px;height:300px;">
					</div>
			  </div>
		</fieldset>
		<fieldset class="layui-elem-field">
			  <legend>实际制造分析</legend>
			  <div class="layui-field-box">
					<div id="div3" style="width: 800px;height:300px;">
					</div>
					<div id="div4" style="width: 800px;height:300px;">
					</div>
			  </div>
		</fieldset>
		<fieldset class="layui-elem-field">
			  <legend>制造质量分析</legend>
			  <div class="layui-field-box">
					<div id="div5" style="width: 800px;height:300px;">
					</div>
					
					<div id="div6" style="width: 800px;height:300px;">
					</div>
					<div style="width: 100%;height:250px;padding-left: 20%;" >
						<div id="div7" style="width: 200px;height:200px;float: left;">
						</div>
						<div id="div8" style="width: 200px;height:200px;float: left;" >
						</div>
						<div id="div9" style="width: 200px;height:200px;float: left;">
						</div>
					</div>
					<div id="div10" style="width: 800px;height:300px;">
					</div>
			  </div>
		</fieldset>
    </div>
		 <script type="text/javascript" src="js/plain/details.js"></script>
		 <script src="js/base.js" type="text/javascript"></script>
		 <script type="text/javascript" src="plugins/layui/lay/modules/laydate.js"></script>
		 
    	 <script th:inline="javascript">
    	 /*<![CDATA[*/ 	
    	 
    		$(document).ready(function(){
    			console.log([[${uniqueid}]]);
    			
    			echarts1([[${uniqueid}]]);
    			echarts2([[${uniqueid}]]);
    			echarts3([[${uniqueid}]]);
    			echarts4([[${uniqueid}]]);
    			echarts5([[${uniqueid}]]);
    			echarts6([[${uniqueid}]]);
    			echarts7();
    			echarts10();
    			echarts8();
    			echarts9();
    			
    			
    			
    			
    			//获取项目履历
    			$.ajax({
    			    url:host+"/users/analysis/getProductsByAccount/"+[[${uniqueid}]],    //请求的url地址
    			    dataType:"json",   //返回格式为json
    			    async:false,//请求是否异步，默认为异步，这也是ajax重要特性
    			    data:{},    //参数值
    			    type:"GET",   //请求方式
    			    success:function(data){
    			    	
    	    			var dhtml="";
    	    			for(i=0;i<data.length;i++){
    	    				dhtml+=("<li><b>"+data[i].join_time+"</b><br/><b>型号："+data[i].project_name+"</b></li>");
    	    			}
    	    			$("#product_record").html(dhtml);
    			    },
    			    error:function(){
    			        //请求出错处理
    			    }
    			});
    			
    			
    		});
    		
			layui.use(['form', 'layedit', 'laydate'], function() {
				var form = layui.form(),
					layer = layui.layer,
					layedit = layui.layedit,
					laydate = layui.laydate;

				//创建一个编辑器
				var editIndex = layedit.build('LAY_demo_editor');
				//自定义验证规则
				form.verify({
					title: function(value) {
						if(value.length < 5) {
							return '标题至少得5个字符啊';
						}
					},
					pass: [/(.+){6,12}$/, '密码必须6到12位'],
					content: function(value) {
						layedit.sync(editIndex);
					}
				});

				//监听提交
				form.on('submit(demo1)', function(data) {
					layer.alert(JSON.stringify(data.field), {
						title: '最终的提交信息'
					})
					return false;
				});
			});
			
			/*]]>*/  
		</script>
		
</body>
</html>
